<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理员新增</title>

    <link rel="stylesheet" href="/layui-v2.5.7/layui/css/layui.css">

</head>
<body>
<!--面包屑-->
<span class="layui-breadcrumb">
  <a href="">主页</a>
  <a href="">管理员</a>
  <a><cite>管理员新增</cite></a>
</span>

<!--分割线-->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>管理员新增</legend>
</fieldset>

<div class="layui-fluid">
    <div class="layui-col-md4 layui-col-md-offset4">
        <form class="layui-form layui-form-pane" id="dataForm" lay-filter="dataForm">
            <div class="layui-form-item">
                <label class="layui-form-label" style="border:0;background:#00000000">管理员头像</label>
                <div class="layui-input-block">
                    <div class="layui-upload">
                        <!--  选择图片-->
                        <button type="button" class="layui-btn layui-btn-sm" id="test1">
                            <span class="layui-icon layui-icon-upload"></span>
                            选择图片
                        </button>
                        <!--  上传图片 -->
                        <button type="button" class="layui-btn layui-btn-sm" id="up1">
                            <i class="layui-icon">&#xe62f;</i>上传图片
                        </button>
                        <div class="layui-upload-list">
                            <img class="layui-upload-img" width="30%" height="30%" id="demo1">
                            <p id="demoText"></p>
                        </div>
                        <!-- 将上传成功的地址 放入隐藏域中-->
                        <input type="text" id="headerpath" name="headerpath"/>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">管理员账户</label>
                    <div class="layui-input-inline">
                        <input type="text" name="username" id="username" lay-verify="required" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">管理员密码</label>
                    <div class="layui-input-inline">
                        <input type="text" name="password" id="password" lay-verify="required" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">管理员姓名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" id="name" lay-verify="required" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="border: 0;background: #00000000">性别</label>
                <div class="layui-input-inline">
                    <input type="radio" name="sex" title="男" value="男" checked>
                    <input type="radio" name="sex" title="女" value="女">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="birth" class="layui-form-label">生日</label>
                <div class="layui-input-inline">
                    <input class="layui-input" type="text" name="birth" id="birth" lay-verify="required" required autocomplete="off">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="txt" class="layui-form-label">介绍</label>
                <div class="layui-input-inline">
                    <input class="layui-input" type="text" name="txt" id="txt" lay-verify="required" required autocomplete="off">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-col-md3 layui-col-md-offset3">
                    <button class="layui-btn layui-btn-normal">确认注册</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script src="/layui-v2.5.7/layui/layui.js"></script>
<script>
    layui.use(['element', 'form', 'upload', 'jquery','layer','laydate'], function () {
        let form = layui.form;
        let upload = layui.upload;
        let $ = layui.jquery;
        let layer = layui.layer;
        let laydate = layui.laydate;

        laydate.render({
            elem:'#birth',
        })

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            , url: '/upload' //上传接口    这里的接口 改为  Controller的地址
            // , field: 'file'//设置文件字段
            // , accept: 'images'//接收上传文件的类型
            // , acceptMime: 'image/*'//选择文件时只显示图片
            // , exts: 'png|jpg|jpeg|gif'//限制文件格式
             , auto: false//设置不自动上传
            , bindAction: '#up1'//绑定上传按钮
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {

                    $('#demo1').attr('src', result);
                });
            }
            , done: function (res) {
                console.log(res.code);
                //上传成功
                if (res.code === 0) {
                    // 将上传成功的地址 放入 隐藏域中，用于表单提交
                    $("#headerpath").val(res.data);
                    layer.msg("上传成功");
                } else {
                    //上传失败
                    layer.msg("上传失败");
                }
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });

        form.on('submit(dataForm)', function () {
            var params = $('#dataForm').serialize();
            $.post('adminAdd', params, function (resp) {
                if (resp.code === 0) {
                    layer.msg(resp.msg+"----"+resp.data);
                } else {
                    layer.alert(resp.msg);
                }
            })
            return false;
        })
    })
</script>

</body>
</html>